<template>
  <div class="addKeyanPage">
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>项目审批</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/shenpi/keyan' }">项目可研评审</el-breadcrumb-item>
        <el-breadcrumb-item>{{id?'编辑':'新增'}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="addContainer">
      <h3 class="title">
        <i></i>
        基本信息
      </h3>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="addForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="projectName">
              <el-autocomplete :disabled="id?true:false" class="inline-input" v-model="ruleForm.projectName" :fetch-suggestions="nameSearch"
                placeholder="请输入项目名称" @select="handleSelect">
                <template slot-scope="{ item }">
                  <div class="name">{{ item.projectName }}</div>
                </template>
              </el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目编号" prop="projectNo">
              <el-autocomplete :disabled="id?true:false" class="inline-input" v-model="ruleForm.projectNo" :fetch-suggestions="numSearch"
                placeholder="请输入项目编号" @select="handleSelect">
                <template slot-scope="{ item }">
                  <div class="name">{{ item.projectNo }}</div>
                </template>
              </el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目编码" prop="uniqueCityCode">
              <el-input placeholder="请输入项目概算" v-model="ruleForm.uniqueCityCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="资金来源" prop="capitalSource">
              <el-select v-model="ruleForm.capitalSource" placeholder="请选择资金来源">
                <el-option label="民政局" value="民政局"></el-option>
                <el-option label="公安局" value="公安局"></el-option>
                <el-option label="财政局" value="财政局"></el-option>
                <el-option label="国税局" value="国税局"></el-option>
                <el-option label="土地局" value="土地局"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目概算" prop="projectBudget">
              <el-input placeholder="请输入项目概算" v-model="ruleForm.projectBudget"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目类型" prop="projectCategoryName">
              <el-select v-model="ruleForm.projectCategoryName" placeholder="请选择项目类型">
                <el-option label="全市发展规划" value="1"></el-option>
                <el-option label="专项发展规划" value="2"></el-option>
                <el-option label="软件开发" value="3"></el-option>
                <el-option label="系统集成" value="4"></el-option>
                <el-option label="民政局" value="5"></el-option>
                <el-option label="公安局" value="6"></el-option>
                <el-option label="财政局" value="7"></el-option>
                <el-option label="国税局" value="8"></el-option>
                <el-option label="土地局" value="9"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划开始时间" prop="planBeginTime">
              <el-date-picker v-model="ruleForm.planBeginTime" align="right" type="date" placeholder="请选择开始时间"
                :picker-options="pickerOptions" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划结束时间" prop="planEndTime">
              <el-date-picker v-model="ruleForm.planEndTime" align="right" type="date" placeholder="请选择结束时间"
                :picker-options="pickerOptions" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目联系人" prop="projectContact">
              <el-input placeholder="请输入项目联系人" v-model="ruleForm.projectContact"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目联系人电话" prop="projectContactMobile">
              <el-input placeholder="请输入项目联系人电话" v-model="ruleForm.projectContactMobile"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="fileList">
            <el-form-item label="附件" prop="name">
              <el-upload name="multipartFiles" class="upload-demo" :action="$config.API_URL + '/file/upload'"
                :on-change="handleOneChange" :file-list="fileOneList" :limit="1" :before-remove="removeOneFile">
                <div class="uploadBox">
                  <i class="el-icon-plus"></i>
                  <span>上传一次性告知函</span>
                </div>
              </el-upload>
              <el-upload name="multipartFiles" class="upload-demo" :action="$config.API_URL + '/file/upload'"
                :on-change="handleChange" :file-list="fileList" :limit="1" :before-remove="removeFile">
                <div class="uploadBox">
                  <i class="el-icon-plus"></i>
                  <span>上传附件</span>
                </div>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png/word/pdf/zip/excle/ppt格式文件，文件不能超过50MB</div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="建设内容" prop="name">
              <el-input :rows="3" type="textarea" placeholder="请输入内容" v-model="ruleForm.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="operateBtn">
      <el-button type="primary" @click="submitForm('ruleForm', 2)">提交</el-button>
      <el-button plain @click="submitForm('ruleForm', 1)">保存</el-button>
      <el-button plain @click="cancel">取消</el-button>
    </div>
    <el-dialog title="选择代办人" :visible.sync="isShowUserDialog" width="40%">
      <el-table :data="peopleList" @row-click="setNextUser">
        <el-table-column label="姓名" prop="name"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
/* eslint-disable */
  export default {
    name: 'addkeyan',
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          }]
        },
        ruleForm: {
          projectName: "",
          type: 1
        },
        attachmentId: null,
        oneAttachmentId: null,
        rules: {
          projectName: [{
            required: true,
            message: "请输入项目名称",
            trigger: "blur"
          }],
          projectNo: [{
            required: true,
            message: "请输入项目编号",
            trigger: "blur"
          }],
          capitalSource: [{
            required: true,
            message: "请选择资金来源",
            trigger: "change"
          }],
          projectCategoryName: [{
            required: true,
            message: "请选择项目类型",
            trigger: "change"
          }],
          projectBudget: [{
            required: true,
            message: "请输入项目概算",
            trigger: "blur"
          }],
          uniqueCityCode: [{
            required: true,
            message: "请输入项目编码",
            trigger: "blur"
          }],
          projectContact: [{
            required: true,
            message: "请输入项目联系人",
            trigger: "blur"
          }],
          projectContactMobile: [{
            required: true,
            message: "请输入项目联系人电话",
            trigger: "blur"
          }]
        },
        fileList: [],
        fileOneList: [],
        isShowUserDialog: false,
        peopleList: []
      };
    },
    computed: {
      id () {
        return this.$route.query.id
      }
    },
    mounted() {
      if (this.id) {
        this.getDetail()
      }
    },
    methods: {
      getDetail () {
        this.axios
          .get("/projectProcess/getOne", { params: { id: this.id } })
          .then(res => {
            if (res.code !== 1000) {
              this.$message.error(res.message)
              return
            }
            this.ruleForm = res.data
          })
      },
      setNextUser (row) {
        console.log('setNextUser.row.jfId', row.jfId)
        this.nextUserId = row.jfId
        this.ajaxSubmit(2)
      },
      ajaxGetPeople () {
        this.axios.get('/role/findMembersByBuid/test').then(res => {
          if (res.code !== 1000) {
            this.$message.error(res.message)
            return
          }
          this.peopleList = res.data.data.list
        }).finally(() => {
        })
      },
      removeOneFile(file) {
        this.oneAttachmentId = null
      },
      removeFile(file) {
      	this.attachmentId = null
      },
      nameSearch(queryString, cb) {
        this.axios
          .get("/mediumLongTermpm/getList", {
            params: {
              pageNumber: 1,
              pageSize: 10000,
              projectName: queryString
            }
          })
          .then(res => {
            cb(res.data.records);
          });
      },
      numSearch(queryString, cb) {
        this.axios
          .get("/mediumLongTermpm/getList", {
            params: {
              pageNumber: 1,
              pageSize: 10000,
              projectNo: queryString
            }
          })
          .then(res => {
            cb(res.data.records);
          });
      },
      // 选中数据
      handleSelect(item) {
        item.mediumlongProjectId = item.projectId
        delete item.projectId
        console.log(item)
        this.ruleForm = item
      },
      submitForm(formName, status) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            if (status === 2) {
              this.isShowUserDialog = true
              this.ajaxGetPeople()
            } else {
              this.ajaxSubmit(status)
            }
          } else {
            this.$message.error("请填写带*的必填项！");
            return false;
          }
        });
      },
      ajaxSubmit (status) {
        this.ruleForm.type = 1
        if (status == 2) {
          this.ruleForm.nextUserId = this.nextUserId
        }
        this.ruleForm.currentState = status
        if (this.attachmentId || this.oneAttachmentId) {
          let attachmentId = []
          if (this.attachmentId) {
            attachmentId.push({
              name: '附件',
              id: this.attachmentId
            })
          }
          if (this.oneAttachmentId) {
            attachmentId.push({
              name: '一次性接收函',
              id: this.oneAttachmentId
            })
          }
          this.ruleForm.attachmentId = JSON.stringify(attachmentId)
          this.ruleForm.fileType = '21'
        }
        this.axios.post('/projectProcess/insert', this.ruleForm).then(res => {
          if (res.code !== 1000) {
            this.$message.error(res.message)
            return
          }
          this.$emit('success')
          this.$message({
            type: 'success',
            message: '保存成功'
          })
          this.$router.go(-1)
        })
      },
      cancel() {
        this.$router.go(-1);
      },
      handleChange(file, fileList) {
        if (file.response) {
          this.attachmentId = file.response.data.attachmentId
        }
      },
      handleOneChange(file, fileList) {
        if (file.response) {
          this.oneAttachmentId = file.response.data.attachmentId
        }
      }
    }
  };
</script>
<style lang="less" scoped>
  .addKeyanPage {
    .addContainer {
      margin-top: 20px;
      padding: 20px;
      background-color: #fff;

      .addForm {
        .el-row {
          border: 1px solid rgba(238, 238, 238, 1);
          border-bottom: none;

          .el-col {
            border-bottom: 1px solid rgba(238, 238, 238, 1);
          }
        }

        .el-select,
        .el-input {
          width: 100%;
        }
      }

      .title {
        font-size: 18px;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        i {
          width: 4px;
          height: 16px;
          display: inline-block;
          background-color: #4967cf;
          margin-right: 6px;
        }
      }
    }

    .operateBtn {
      text-align: center;
      padding-top: 30px;

      .el-button--small {
        padding: 9px 30px;
      }
    }

    .fileList {
      .uploadBox {
        width: 124px;
        height: 58px;
        border-radius: 4px;
        border: 2px dashed rgba(160, 179, 244, 1);
        display: flex;
        flex-direction: column;

        .el-icon-plus {
          font-size: 26px;
          color: #4967CF;
        }
      }

      .upload-demo {
        padding: 11px 16px;
        width: 500px;
      }
    }
  }
</style>
<style lang="less">
  .addKeyanPage {
    .addForm {
      .el-form-item {
        margin-bottom: 0;
      }

      .el-input {
        height: 40px;
        line-height: 40px;
      }

      .el-input__inner,
      .el-textarea__inner {
        border: none !important;
      }

      .el-form-item__label {
        background-color: #fafafa;
        min-height: 40px;
        line-height: 40px;
      }

      .el-form-item__error {
        display: none;
      }
    }

  }
</style>
